<template>
	<view class="MySettings">
		<!-- <view class="MySettingsBox">
			<view class="SettingsList">
				<view style="display: flex;justify-content: center;margin-bottom: 20upx;">
					<u-avatar src="" mode="circle" size="96" :show-sex="true" sex-icon="man"></u-avatar>
				</view>
				
				<view class="SettingsItem" @click="topersonalData">
					<view class="SettingsName">个人资料</view>
					<u-icon name="arrow-right" color="#BFBFBF" size="25"></u-icon>
				</view>
				<view class="SettingsItem" @click="toAccountSecurity">
					<view class="SettingsName">账号与安全</view>
					<u-icon name="arrow-right" color="#BFBFBF" size="25"></u-icon>
				</view>
				<view class="SettingsItem" @click="toCoustomer">
					<view class="SettingsName">联系客服</view>
					<u-icon name="arrow-right" color="#BFBFBF" size="25"></u-icon>
				</view>
				<view class="SettingsItem" @click="toAboutus">
					<view class="SettingsName">关于我们</view>
					<u-icon name="arrow-right" color="#BFBFBF" size="25"></u-icon>
				</view>
			</view>
		</view>
		<view class="loginBtn" @click="tologin" v-if="!loginFlag">登录</view>
		<view class="loginBtn" @click="quitLogin" v-if="loginFlag">退出登录</view> -->
		<view class="settingHead">
			<u-avatar v-if="userMsg.image_url" :src="getImage(userMsg.image_url)" mode="circle" size="112" :show-sex="true" :sex-icon="userMsg.gender==1?'man':'woman'"></u-avatar>
			<view class="userMsg">
				<view class="userName">{{userMsg.username}}</view>
				<view class="quitLogin">
					<view v-if="loginFlag" @click="quitLogin">退出登录</view>
					<view v-else @click="tologin">登录</view>
					<image src="../static/index/quitLogin.png"></image>
				</view>
			</view>
		</view>
		<view class="conItem" @click="topersonalData">
			<image src="../static/index/presonalData.png"></image>
			<view>个人资料</view>
		</view>
		<view class="conItem" @click="toAccountSecurity">
			<image src="../static/index/security.png"></image>
			<view>资料与安全</view>
		</view>
		<!-- <view class="conItem" @click="toCoustomer">
			<image src="../static/index/coustomer.png"></image>
			<view>联系客服</view>
		</view> -->
		<view class="conItem" @click="noWx">
			<image src="../static/index/wechat1.png"></image>
			<view>解绑微信</view>
		</view>
		<view class="conItem" @click="toGuide">
			<image src="../static/mine/guide.png"></image>
			<view>使用指引</view>
		</view>
		<view class="conItem" @click="toAboutus">
			<image src="../static/index/aboutUs.png"></image>
			<view>关于我们</view>
		</view>
		<view class="conItem" @click="toExplain">
			<image src="../static/index/explain.png"></image>
			<view>投诉与建议</view>
		</view>
		<view class="taggleIdentity" @click="taggleIdentity">
			<view v-if="identityFlag">切换达人身份</view>
			<view v-else>切换运营身份</view>
			<image src="../static/index/taggleIdentity.png"></image>
		</view>
		<view class="popupBox">
			<u-modal v-model="showName" title="投诉" :show-cancel-button="true" @confirm="modifyName">
				<view style="padding:64upx;">
					<textarea placeholder="请输入" v-model="explain" />
				</view>
			</u-modal>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	const app = getApp();
	export default {
		name:"setting",
		data() {
			return {
				loginFlag:false,
				identityFlag:false,
				userMsg:{},
				explain:"",
				showName:false
			};
		},
		created() {
			if(uni.getStorageSync("rmToken")){
				this.loginFlag = true;
				this.getUserFun();
			}else{
				this.loginFlag = false;
			}
			if(uni.getStorageSync("identity")){
				this.identityFlag = true;
			}else{
				this.identityFlag = false;
			}
		},
		methods:{
			noWx(){
				uni.showModal({
					content:"确定要解绑微信吗?",
					success:res=>{
						console.log(res);
						if(res.confirm){
							this.$u.api.userUnboundWx().then(res=>{
								console.log(res)
								this.$refs.uToast.show({
									title:"解绑成功",
									type:"success",
									duration:2000
								})
							})
						}
					}
				})
			},
			toExplain(){
				uni.navigateTo({
					url:"/pages/pagethree/pages/explain/explain"
				})
			},
			toGuide(){
				uni.navigateTo({
					url:"/pages/pagethree/pages/guide/guide"
				})
			},
			modifyName(){
				console.log(123)
			},
			getImage(url){
				if(url&&(url.indexOf("http://")!=-1||url.indexOf("https://")!=-1)){
					return url;
				}else{
					return app.$vm.globalData.imgBaseUrl + url;
				}
			},
			getUserFun(){
				this.$u.api.userDetails({user_id:uni.getStorageSync("userId")}).then(res=>{
					console.log(res)
					this.userMsg = res.data.data;
					uni.$emit("clearUser",this.userMsg)
				})
			},
			taggleIdentity(){
				uni.$emit("toggleIdtntity",!this.identityFlag)
			},
				toCoustomer(){
					uni.navigateTo({
						url:"/pages/pagetwo/pages/coustomer/coustomer"
					})
				},
				quitLogin(){
					let _this = this;
					uni.showModal({
						content:"确定要退出登录吗?",
						success:res=>{
							if(res.confirm){
								_this.$u.http.setConfig({
									header: {
										'token': ""
									}
								})
								uni.removeStorageSync("rmToken");
								uni.removeStorageSync("rmUser");
								uni.removeStorageSync("userId");
								_this.userMsg = {};
								_this.loginFlag = false;
								uni.$emit("clearUser",{})
								_this.loginFlag = false;
								app.$vm.globalData.hideFlag = true;
								uni.closeSocket({
									reason:"khdClose"
								})
								_this.$refs.uToast.show({
									title:"已退出登录",
									type:"success",
									duration:2000
								})
							}
						}
					})
					
				},
				//登录
				tologin(){
					// #ifdef !MP-WEIXIN
					uni.navigateTo({
						url:"/pages/pagefive/pages/wxLogin/wxLogin"
					})
					// #endif
					// #ifdef APP-PLUS
					uni.navigateTo({
						url:"/pages/pagethree/pages/Login/Login"
					})
					// #endif
					// #ifdef MP-TOUTIAO
					uni.navigateTo({
						url:"/pages/pagethree/pages/Login/Login"
					})
					// #endif
				},
				//关于我们
				toAboutus(){
					uni.navigateTo({
						url:"/pages/pageone/pages/richWeb/richWeb"
					})
					
				},
				//个人资料
				topersonalData(){
					uni.navigateTo({
						url:"/pages/pagefour/pages/personal-data/personal-data"
					})
				},
				//账号安全
				toAccountSecurity(){
					uni.navigateTo({
						url:"/pages/pageone/pages/AccountSecurity/AccountSecurity"
					})
				}
			
		}
	}
</script>

<style scoped lang="less">
	.taggleIdentity{
		width: 408upx;
		height: 92upx;
		display: flex;
		align-items: center;
		box-sizing: border-box;
		padding-left: 56upx;
		background: #FFF9E5;
		border-radius: 0 60upx 60upx 0;
		margin-top: 68upx;
	}
	.taggleIdentity>view{
		font-size: 32upx;
		color: #FFAC3F;
		margin-right: 16upx;
		line-height: 40upx;
	}
	.taggleIdentity>image{
		width: 40upx;
		height: 40upx;
	}
	
	
	.conItem{
		width: 100%;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		padding: 0 56upx;
		margin-top: 68upx;
	}
	.conItem>image{
		width: 32upx;
		height: 32upx;
		margin-right: 16upx;
	}
	.conItem>view{
		font-size: 28upx;
		line-height: 32upx;
		color: #333333;
		width: calc(100% - 48upx);
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	
	.settingHead{
		width: 100%;
		box-sizing: border-box;
		padding: 100upx 56upx 56upx;
		background-image: url(../static/index/settingBack.png);
		background-position: 0 0;
		background-size: 100% 100%;
		display: flex;
		align-items: center;
	}
	.settingHead>image{
		width: 112upx;
		height: 112upx;
		border-radius: 50%;
		margin-right: 16upx;
	}
	.userMsg{
		width: calc(100% - 128upx);
		height: 112upx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		margin-left: 16upx;
	}
	.userName{
		font-size: 32upx;
		color: #3E3E3E;
		font-weight: bold;
		margin-bottom: 20upx;
		font-family: Source Han Sans CN;
		line-height: 32upx;
	}
	.quitLogin{
		display: flex;
		align-items: center;
	}
	.quitLogin>view{
		font-size: 24upx;
		line-height: 24upx;
		color: #FF5555;
		margin-right: 8upx;
	}
	.quitLogin>image{
		width: 24upx;
		height: 24upx;
	}
	
.status_bar{
	height: var(--status-bar-height);
	width: 100%;
}
.MySettings{
	background-color: white;
	height: 100%;
	// // min-height: 100vh;
	// // padding-top: 88upx;
	// .MySettingsBox{
	// 	padding: 16upx 0;
	// 	.SettingsList{
	// 		.SettingsItem{
	// 			display: flex;
	// 			justify-content: space-between;
	// 			align-items: center;
	// 			width: 100%;
	// 			background-color: #fff;
	// 			box-sizing: border-box;
	// 			padding: 32upx 24upx;
	// 			border-bottom: 2upx solid #EFEFEF;
	// 			.SettingsName{
	// 				font-size: 28upx;
	// 				font-family: Source Han Sans CN;
	// 				font-weight: 400;
	// 				color: #333333;
	// 			}
	// 		}
	// 	}
	// }
	// .loginBtn{
	// 	position: fixed;
	// 	bottom: 0;
	// 	width: 80%;
	// 	height: 100upx;
	// 	background: #FFFFFF;
	// 	opacity: 1;
	// 	font-size: 28upx;
	// 	font-family: Source Han Sans CN;
	// 	font-weight: 400;
	// 	line-height: 100upx;
	// 	text-align: center;
	// 	color: #FFAC3F;
	// }
}
</style>
